<template>
	<view class="guess">
		<!-- 猜你喜欢 -->
		<view class="f-header m-t">
			<view class="tit-box">
				<!-- <text class="line"></text> -->
				<text class="tit">猜您喜欢</text>
				<!-- <text class="line"></text> -->
			</view>
		</view>

		<view class="guess-section">
			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image :src="item.defaultAlbum" mode="scaleToFill"></image>
				</view>
				<text class="title clamp">{{item.pName}}</text>
				<view class="price">
					<text>￥{{item.fSalePrice}}</text>
					
					<image class="collect" src="/static/img/2/2-19.png" mode="aspectFill"></image>

				</view>


			</view>
		</view>
	</view>


</template>

<script>
	export default {
		name: "guess",
		data() {
			return {
				order: "asc",
				pagesize: 12,
				pageindex: 1,
				goodsList: []

			}
		},
		props: ["goods_id_exclude", "categoryid", "type"],
		async mounted() {
			let datas = {
				queryCondition: {
					order: [{
							fieldname: "iOrder",
							direction: this.order
						}

					],
					pagesize: this.pagesize,
					pageindex: this.pageindex,
					where: [{
							fieldname: "goods_id_exclude",
							valuefrom: this.goods_id_exclude.join(",")
						},
						{
							fieldname: "categoryid",
							valuefrom: this.categoryid.join(",")
						},
						{
							fieldname: "type",
							valuefrom: this.type
						}
					],
				}
			}
			await this.$Request.post(this.$api.httpApi.home.getRecommendCartList +
				'&token=' + this.$token, datas).then(res => {
				if (res.code == 200) {
					this.goodsList = res.data.data
				}
			})
		},
		methods: {
			navToDetailPage(item) {
				let id = item.pid;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&iShopId=${item.iShopId}`
				})
			}
		}



	}
</script>

<style lang="scss">
	/* 猜你喜欢 */
	.f-header {
		display: flex;
		align-items: center;
		// height: 140upx;
		padding: 0 33upx;

		.tit-box {
			flex: 1;
			display: flex;
			// flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.tit {
				display: inline-block;
				font-size: 35upx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				margin: 0 10upx;
				
			}

			.line {
				display: inline-block;
				width: 52upx;
				height: 2upx;
				background: rgba(102, 102, 102, 1)
			}
		}


	}

	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 33upx;
		margin-top: 38upx;
		.guess-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			background: #FFFFFF;
			border-radius: 20upx;
			margin-bottom: 21upx;
			padding: 17upx 20upx;
			box-shadow: 0 0 20upx 8upx #f5f5f5;
			&:nth-child(2n+1) {
				margin-right: 21upx;
			}

		}

		.image-wrapper {
			width: 100%;
			// height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			background: #fff;

			image {
				width: 293upx;
				height: 293upx;
				border-radius: 10upx;
				opacity: 1;
			}
		}

		.title {
			font-size: 25upx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #121212;
			
			
			margin-top: 32upx;
		}

		.price {
			font-size: 27upx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #DA1515;
			// position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 30upx;
			.pay {
				font-size: 24upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				margin-left: 6upx;
			}

			.collect {
				// position: absolute;
				
				width: 30upx;
				height: 30upx;
				z-index: 1;
			}

		}


	}
</style>
